<template>
    <div id="app">
        <h2>1801B车票信息统计</h2>
        <button @click="isShow=true">添加</button>
        <ul>
            <li v-for="item in list" :key="item.id">{{item.username}}--{{item.ticket}} <button @click="del(item.id)">删除</button> <button @click="edit(item)">编辑</button></li>
        </ul>
        <div>
            <span v-for="num in total" @click="changeNum(num)">{{num}}</span>
        </div>
        <div class="dialog" v-show="isShow">
            <input type="text" placeholder="请输入用户名" v-model="username">
            <input type="text" placeholder="请输入车票" v-model="ticket">
            <button @click="cur">确定</button>
        </div>
    </div>
</template>
<script>
    import axios from 'axios';
    export default {
        data(){
            return {
                list:[],      //列表数据
                isShow:false, //弹窗的隐藏
                username:'',  //用户名
                ticket:'',    //密码
                id:-1,         //编辑的id
                pagenum:1,    //第几页
                limit:3,      //每页多少条
                total:0       //一共多少页
            }
        },
        methods:{
            //编辑
            edit(item){
                this.id = item.id;
                this.username = item.username;
                this.ticket = item.ticket;
                this.isShow = true;
            },
            //添加
            cur(){
                //区分是添加还是编辑
                let url = '';
                let options = {};
                let type = 'post';
                if(this.id != -1){
                    //编辑
                    url = '/api/update';
                    options = {username:this.username,ticket:this.ticket,id:this.id};
                    type = 'put';
                }else{
                    //添加
                    url = '/api/add';
                    options = {username:this.username,ticket:this.ticket};
                }
                axios[type](url,{...options}).then(res => {
                    if(res.data.code === 1){
                        alert("成功");
                        //初始化
                        this.username = '';
                        this.ticket = '';
                        this.id = -1;
                        this.getList();
                    }else if(res.data.code === 3){
                        alert("此用户名已存在");
                    }else{
                        alert(res.data.msg)
                    }
                    this.isShow = false;
                })
            },
            //删除
            del(id){
                axios.delete('/api/del',{params:{id}}).then(res => {
                    this.getList();
                })
            },
            //获取列表数据
            getList(){
                //请求数据
                axios.get('/api/list',{params:{pagenum:this.pagenum,limit:this.limit}}).then(res => {
                    console.log(res);
                    if(res.data.code === 1){
                        this.list = res.data.data;
                        this.total = Math.ceil(res.data.total/this.limit);
                    }
                })
            },
            changeNum(num){
                this.pagenum = num;
                this.getList();
            }
        },
        created(){
            this.getList();
        }
    }
</script>

<style lang="scss">
    .dialog{
        width:200px;
        height: 200px;
        border:1px solid gray;
        background: #fff;
        position:absolute;
        top:50%;
        left:50%;
        margin-left:-100px;
        margin-top:-100px;
        padding:10px;
    }
</style>
